﻿<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 导入jstl标签库 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title>我的购物车</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"	href="${ctx }/plugin/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet"	href="${ctx }/css/cart.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${ctx }/plugin/jquery/1.11.3/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${ctx }/plugin/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="${ctx }/js/cart.js"></script>
<script src="${ctx }/js/user.js"></script>

</head>
<body>
	<div class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div class="page-header">
					<h1>
						B2C网上商城 <small>Online Shopping Mall</small>
					</h1>
				</div>							
				<ul class="nav nav-pills">
					<li class="active"><a href="${ctx }/welcome.jsp">首页</a></li>
					<c:if test="${user!=null}">					
					<li>							
						<a href="${ctx }/pages/back/user/findById.action?id=${user.id}" title="${user.name}">用户信息</a>
					</li>
					</c:if>	
					<li class="pull-right">
						<c:if test="${user == null }">
							<a href="${ctx }/view/login.jsp"><span
								class="glyphicon glyphicon-log-in"></span>登录</a>
						</c:if>
						<c:if test="${user != null }">
									欢迎你，${user.name }  <button type="button"
								class="btn btn-danger btn-sm" onclick="logout()">退出</button>
						</c:if></li>
				</ul>
			</div>
		</div>
		<hr>
		<div class="row clearfix">
			<div class="col-md-2 column">
				<div class="list-group">
					<a href="${ctx }/pages/back/product/list.action" class="list-group-item active">商品分类</a>
					<c:forEach items="${categorys}" var="category">
						<div class="list-group-item">
							<a href="${ctx }/pages/back/product/list.action?kw=${category.id}"
								title="${ category.description }">${ category.name }</a>
						</div>
					</c:forEach>
				</div>
			</div>
			<div class="col-md-10 column">
				<ul class="breadcrumb">
					<li><a href="${ctx }/welcome.jsp">首页</a></li>
					<li class="active">购物车</li>
				</ul>				
				<!-- 购物车 -->
				<div class="panel panel-default">
    				<div class="panel-heading">
	    				<label for="checkAll">全选</label>
	    				<input name="checkAll" type="checkbox"  class="check_all">
    				</div>
					<table class="table table-striped table-hover table-condensed">
						<thead>
							<tr>				
								<th></th>				
								<th>序号</th>
								<th>商品</th>						
								<th>数量</th>
								<th>价格</th>
								<th>小计</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>																
							<c:forEach var="item" items="${cart.items }" varStatus="status">
								<tr>
									<td>
										<input type="checkbox"  class="check_one">
										<input type="hidden" id="pid" value="${item.value.productId}"/>
									</td>
									<td>${status.index + 1}</td>									
									<td>
										<a class="btn btn-link"  href="${ctx }/pages/back/product/findById.action?id=${item.value.productId}">
											<img src="${ctx }/upload/${item.value.img }" width="30px" height="30px"  class="img-rounded"  />
											${item.value.productName}
											</a>											
								   </td>								
									<td>					
											<!-- 数量 	 -->
											<div class="ps">
							                    <a href="#" class="reduce"  title="减">-</a>
							                    <input type="text" class="number" value="${item.value.amount }"  maxlength="6">
							                    <a href="#" class="plus"  title="加">+</a>
							                </div>											
									</td>
									<td>
									    	<!-- 单价 -->
											<label  class="price">${item.value.price / item.value.amount}</label>											
									</td>
									<td>
									  	<!-- 合计 -->
									  	<label class="total">${item.value.price}</label>								
									</td>
									<td>
											<a href="#"  class="del">删除</a>
											<input type="hidden"   value="${item.key}">	
									</td>
								</tr>
							</c:forEach>						
						</tbody>
					</table>									
					<!-- 结算 -->		
					<nav class="navbar navbar-default " role="navigation">
						<div class="container-fluid">						
							<div>
								<!--向左对齐-->
								<p class="navbar-text navbar-left">
									<label for="checkAll1">全选</label>
            						<input name="checkAll1" type="checkbox"  class="check_all">
								</p>
								<p class="navbar-text navbar-left">	
									<a href="#"  class="clear"  style="color:#66512c;" data-toggle="modal" data-target="#myModal">清空购物车</a>			
								</p>							
								<!--向右对齐-->
								<p class="navbar-text navbar-right">
									已先商品<label class="pp">0</label>
									件  合计（不含运费）：￥
									<label	class="pm">0.00</label>
									<a href="#" 	class="btn btn-default btn-danger "  id="submitOrder">去结算</a>		
								</p>								
							</div>							
							<!-- 模态框（Modal） -->
							<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							    <div class="modal-dialog">
							        <div class="modal-content">
							            <div class="modal-header">
							                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							                <h4 class="modal-title" id="myModalLabel">清空购物车</h4>
							            </div>
							            <div class="modal-body">确定清空？  点击 '关闭'放弃退出，点击'是'执行清空。</div>
							            <div class="modal-footer">
							                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							                <button type="button" class="btn btn-primary"  id="clearcart">是</button>
							            </div>
							        </div>
							    </div>
							</div>			
							
						</div>
					</nav>
				</div>		
				<p class="text-center"><font color="red" id="errors"></font></p>	
			</div>
		</div>	
	</div>
</body>
</html>